<template>
  <div>
    <div class="hearder-search">
      <el-col :span="24" class="breadcrumb-container input-val-box">
        <el-button size="small" type="primary" @click="addStudent('add')">添加异常项</el-button>
        <span class="allbook">总 {{ page.total }} 条数据</span>
      </el-col>
    </div>
    <!--本体列表，数据 -->
    <div class="table-body">
      <div class="table-body-box">
        <table class="table" v-if="arryList.length">
          <tr>
            <th>异常名称</th>
            <th>注意事项</th>
            <th>异常说明</th>
            <th>事项操作</th>
          </tr>
          <tr v-for="(item,index) in arryList" :key="index">
            <td :rowspan="item.rowspan" v-if="item.rowspan" class="editBox">
              {{ item.name }}
              <i class="el-icon-edit-outline" @click="eiditdisease(item.id,'title')" title="编辑异常名称"></i>
              <!--              <i class="el-icon-delete" style="color: red;"></i>-->
              <i class="el-icon-plus" title="添加注意事项" @click="addStudent(item.id,item)"></i>
            </td>
            <td>
              <el-tag
                  size="small">
                {{ item.attr.cate.name }}
              </el-tag>
            </td>
            <td style="width:500px;">
              {{ item.attr.description?item.attr.description+',':'' }}{{item.attr.list.length?'避免食用':''}}<el-tag
                :key="tag"
                v-for="tag in item.attr.list"
                :disable-transitions="false"
                class="mr-5"
                size="medium">
              {{tag}}
            </el-tag>
            </td>
            <td style="width: 180px;">
              <el-button size="small" @click="eiditdisease(item.attr.id,'attr')">编辑详情
              </el-button>
              <el-button type="danger" size="small" plain @click="handleDetel(item, item.attr)">删除
              </el-button>
            </td>
          </tr>
        </table>
        <table class="table" v-else>
          <tr>
            <th>异常名称</th>
            <th>注意事项</th>
            <th>异常说明</th>
            <th>事项操作</th>
          </tr>
          <tr>
            <td colspan="4">暂无数据</td>
          </tr>
        </table>
      </div>
    </div>
    <!--工具条 分页-->
    <el-col :span="24" class="toolbar">
      <el-pagination
          background
          layout="total, prev, pager, next"
          :total="page.total"
          :page-size="page.pagesize"
          @current-change="handleSizeChange">
      </el-pagination>
    </el-col>
    <!--    编辑异常说明-->
    <attrDetail :visible.sync="attrDetailVisible" :deviceId="attrId" @beforePageFn="InitFn"
                :attrType="attrType"></attrDetail>
    <!--    添加异常事项-->
    <deviceDetail :visible.sync="detailVisible" :deviceId="deviceId" @beforePageFn="InitFn"
                  :attrOption="attrOption"></deviceDetail>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import deviceDetail from './Detail'
import attrDetail from './attrDetail'

export default {
  components: {
    deviceDetail,
    attrDetail
  },
  data() {
    return {
      detailVisible: false,
      attrDetailVisible: false,
      attrId: '',
      deviceId: 0,
      arryList: [], // 页面数据列表
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      attrType: '',
      attrOption: ''
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      let n = this;
      this.$fetch(this.api.Developmental.carefull.disease.index, {
        p: this.page.pageindex
      }).then((response) => {
        if (response.code === 0) {
          let list = n.changeData(response.list.data)
          let new_list = []
          for (let i in list) {
            let attrId = []
            for (let n in list[i].careful) {
              attrId.push(list[i].careful[n].cate_id)
            }
            for (let n in list[i].careful) {
              let new_a = {}
              new_a.name = list[i].name;
              new_a.id = list[i].id;
              list[i].careful[n].list = list[i].careful[n].list?JSON.parse(list[i].careful[n].list):[];
              new_a.attrId = attrId;
              new_a.rowspan = list[i].careful.length === 1 ? 1 : (!Number(n) ? list[i].careful.length : 0);
              new_a.attr = list[i].careful[n];
              new_a.carefulNumber = list[i].careful.length;
              new_list.push(new_a);
            }
          }
          this.arryList = n.changeData(new_list)
          console.log('最后的参数：', this.arryList)
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    refreshFn() {
      this.InitFn()
    },
    addStudent(id, row) {
      this.deviceId = id;
      this.attrOption = row ? this.changeData(row) : '';
      this.detailVisible = true
    },
    changeData(option) {
      return JSON.parse(JSON.stringify(option))
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    detelListFn(index) {
      console.log(index)
    },
    // 编辑事项
    eiditdisease(id, type) {
      this.attrId = id
      this.attrType = type
      this.attrDetailVisible = true
    },
    handleDetel(item, attr) {
      console.log('item', item)
      this.$confirm(`确认删除该类异常, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(item, attr)
      }).catch(() => {
      })
    },
    detelRespon(item, attr) {
      // deleteSmall 参数 carefulNumber
      let href_ = this.api.Developmental.carefull.disease.delete
      let data_ = {id: item.id}
      if(item.carefulNumber>1){
        href_ = this.api.Developmental.carefull.disease.deleteSmall
        data_ = {id: attr.id}
      }
      this.$post(href_, data_).then((response) => {
        if (response.code === 0) {
          this.InitFn()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  },
  mounted() {
  }
}
</script>
<style>
.data-header-title {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  color: #005ca2;
  margin-bottom: 10px;
}

.data-header-line {

}

.header-number {
  color: #ff7913;
  font-size: 16px;
  font-weight: bold;
}

.table-title-body {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 16px;
  border-left: 3px solid #208eff;
  height: 14px;
  line-height: 14px;
  padding-left: 8px;
}

.table-bordered {
  width: 100%;
}

.table {
  border-collapse: collapse;
  border: 1px solid #d6d6d6;
  width: 100%;
}

.table th {
  height: 50px;
  background: #dfefff;
  border: 1px solid #d6d6d6;
}

.table td {
  text-align: center;
  padding: 10px;
  border: 1px solid #d6d6d6;
}

.table-bordered tr td {
  border: 1px solid #ddd;
}

.table-bordered td {
  padding: 8px;
  line-height: 1.42857143;
}

.table-bordered td input {
  height: 30px;
  border: 1px solid #ddd;
  text-indent: 5px;
}

.attr-table-line-right span {
  color: #3b639f;
  padding: 0 10px;
  cursor: pointer;
}

.editBox i {
  padding: 0 3px;
}

.editBox i:hover {
  text-decoration: underline;
  cursor: pointer;
}
</style>
